<template>
  <div class="login-view">
    <div class="container">
      <el-card>
        <h1>登录</h1>
        <el-tabs v-model="type" class="demo-tabs"> 
          <el-tab-pane
            v-for="item in loginOpation"
            :key="item.id"
            :label="item.label"
            :name="item.name" 
          >
            <login-com>
              <div v-if="item.name === 'common'" class="box">
                <el-button type="primary" link @click = 'handlePush'> 注册账号 </el-button>
                <el-button type="primary" link> 忘记密码 </el-button>
                <el-button type="primary" link> 意见反馈 </el-button>
              </div>
            </login-com>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import LoginCom from '../components/login/LoginCom.vue'
import { ref } from 'vue'
import { storeToRefs } from 'pinia';
import { useMapgisStore_hjh } from '@/stores/mapgis-hjh';
const mapgisStore_hjh = useMapgisStore_hjh();
const {type}  = storeToRefs(mapgisStore_hjh);
const { handlePush } = mapgisStore_hjh;
const loginOpation = ref([
  { id: '1', label: '用户', name: 'common' },
  { id: '2', label: '交管', name: 'traffic' },
  { id: '3', label: '超管', name: 'admin' },
]) // 登录选项卡

</script>

<style lang="scss" scoped>
.login-view {
  width: 100vw;
  height: 100vh;
  background-image: url('@/img/bg2.jpg');
  background-size: cover;
  .container {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    opacity: 0.95;
    :deep(.el-card__body) {
      padding: 40px 50px 50px 50px;
    }
    h1 {
      text-align: center;
      padding-bottom: 20px;
      font-size: 30px;
      line-height: 30px;
      color: #000;
    }
    .box {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
  }
}
</style>
